<template>
	<view>
		<view class="top" :style="{'background-color': bgcolor[tabIndex]}">
			<view class="des">
				<text>超级搜索</text>
				<text>全网优惠券</text>
			</view>
			<view class="tabbar">
				<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100" ></me-tabs>
			</view>
			<search style="width: 90%;margin: 30rpx auto;" :logo="logo[tabIndex]"></search>
		</view>
		<view class="detail">
			操作步骤详情
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabs:['淘宝','拼多多','京东'],
				tabIndex: 0,
				logo:['/static/image/taobao_logo.png','/static/image/pdd_logo.png','/static/image/jd_logo.png'],
				bgcolor:['#fd4e00','#e02e24','#a9241f']
			}
		},
		onLoad() {
			
		},
		methods:{
			tabChange(e){
				console.log(e)
				let _this = this
				uni.setNavigationBarColor({
					frontColor:"#ffffff",
					backgroundColor:_this.bgcolor[e]
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.top{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
			background-color: $uni-color-main;
		.des{
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		
			font-size: 35rpx;
			line-height:60rpx;
			font-weight: bold;
			color: #fff;
		}
		.tabbar{
			width: 100%;
			
			color: #fff;
		}
	}
	
</style>
